<template>
  <div class="group-plan">
    <search
      :isEdit="isEdit"
      :canEdit="canEdit"
      :isCurrentYear="isCurrentYear"
      @cancel="handleCancel"
      @save="handleSave"
      @set="handleSet">
      <SearchInput searchText="Year">
        <a-select
          v-model:value="currentYear"
          show-search
          option-filter-prop="label"
          option-label-prop="label"
          :get-popup-container="triggerNode => triggerNode.parentNode"
          @change="handleYearChange">
          <a-select-option v-for="item in yearArr" :key="item" :label="item">
            {{ item }}
          </a-select-option>
        </a-select>
      </SearchInput>
    </search>
    <a-spin :spinning="loading" tip="Loading...">
      <e-container v-if="buList.length > 0" style="margin-top: 24px">
        <e-title title="By BU" />
        <div style="display: flex; flex-wrap: wrap; margin-top: 6px; margin-left: -80px">
          <div v-for="item in data" :key="item.bumid">
            <input-area v-if="item.type === 1" :title="item.bumName">
              <e-input-number v-model:inputValue="item.revenueAmount" :isEdit="!isEdit" :precision="2" />
            </input-area>
          </div>
        </div>
      </e-container>
      <e-container v-if="branchList.length > 0" style="margin-top: 24px; display: none">
        <e-title title="By Branch" />
        <div style="display: flex; flex-wrap: wrap; margin-top: 6px; margin-left: -80px">
          <div v-for="item in data" :key="item.bumid">
            <input-area v-if="item.type === 2" :title="item.bumName">
              <e-input-number v-model:inputValue="item.revenueAmount" :isEdit="!isEdit" :precision="2" />
            </input-area>
          </div>
        </div>
      </e-container>
    </a-spin>
  </div>
</template>

<script setup>
import { ref, onMounted, inject, computed } from 'vue'
import { useStore } from 'vuex'
import sp from '@/api/salesPlan.js'
import { SAVED_SUCCESSFULLY } from '@/constants/message.js'
import EContainer from '@/components/EContainer.vue'
import EInputNumber from '@/components/EInputNumber.vue'
import ETitle from '@/components/ETitle.vue'
import SearchInput from '../../components/SearchInput.vue'
import search from './components/search.vue'
import inputArea from './components/input.vue'
const store = useStore()
const { message } = inject('Feedback')
// 是否编辑
const isEdit = ref(false)
// 年份数组
const yearArr = ref([])
// 当前选中年
const currentYear = ref()
// 数据
const data = ref([])
const branchList = ref([])
const buList = ref([])
const loading = ref(false)
// 允许编辑 集团销售总监
const canEdit = computed(() => store.getters['user/isPrimaryCSO'])
const isCurrentYear = ref(true)
/**
 * 获取年份
 */
const getYear = async () => {
  const res = await sp.getYears()
  if (res.code === 2000) {
    yearArr.value = res.data
    currentYear.value = yearArr.value[0]
  }
  await getGroupSalesPlan()
}
/**
 * 修改年份
 */
const handleYearChange = val => {
  currentYear.value = val
  isEdit.value = false
  const cYear = new Date().getFullYear()
  isCurrentYear.value = val === cYear
  getGroupSalesPlan()
}
/**
 * 设置
 */
const handleSet = () => {
  isEdit.value = true
}
/**
 * 保存
 */
const handleSave = () => {
  const arr = []
  data.value.map(item => {
    const obj = {}
    obj.bumid = item.bumid
    obj.type = item.type
    obj.year = item.year
    obj.currencyID = item.currencyID
    obj.revenueAmount = Number(item.revenueAmount)
    arr.push(obj)
    return arr
  })
  sp.setGroupPlan(arr).then(res => {
    if (res.code === 2000) {
      message.success(SAVED_SUCCESSFULLY)
      isEdit.value = false
    }
  })
}
/**
 * 取消
 */
const handleCancel = () => {
  isEdit.value = false
  getGroupSalesPlan()
}
/**
 * 获取分部或bum年度销售计划
 * @returns {Promise<void>}
 */
const getGroupSalesPlan = () => {
  loading.value = true
  sp.getGroupSalesPlan({
    year: currentYear.value
  })
    .then(res => {
      if (res.code === 2000) {
        data.value = res.data
        for (let i = 0; i < data.value.length; i++) {
          if (data.value[i].type === 1) {
            buList.value.push(data.value[i])
          } else {
            branchList.value.push(data.value[i])
          }
        }
      }
    })
    .finally(() => {
      setTimeout(() => {
        loading.value = false
      }, 30)
    })
}
/**
 * 初始化
 */
onMounted(() => {
  getYear()
})
</script>

<style lang="less" scoped>
@import '@/assets/style/reset_form';
:deep(.ant-input-number),
:deep(.ant-input-number-input),
:deep(.ant-input-number-disabled) {
  color: @text-black;
  text-align: right;
  width: 12.5vw;
}
</style>
<route lang="yaml">
name: Group Plan
path: '/sales-settings/group-plan'
meta:
  title: Group Plan
  sort: 0
  roles: isPrimaryCSO
</route>
